<template>
  <view class="page-bank-edit">
    <view class="header">
      <view class="title">{{ $t('mine.收款信息') }}</view>
      <uni-icons type="left" color="#ffffff" size="24" class="back-icon" @click="handleBack"></uni-icons>
    </view>
    <view class="content">
      <view class="tabs">
        <view class="tab-item" :class="{ 'is-active': bankType == '1' }" @click="handleChangebankType('1')">{{ $t('mine.银行卡') }}</view>
        <view class="tab-item" :class="{ 'is-active': bankType == '2' }" @click="handleChangebankType('2')">{{ $t('mine.USDT') }}</view>
      </view>
      <view class="form-item">
        <view class="label">{{ $t('mine.真实姓名') }}</view>
        <input v-model="name" class="input" type="text" maxlength="30" :placeholder="$t('mine.请输入真实姓名')" />
      </view>
      <template v-if="bankType == '1'">
        <view class="form-item">
          <view class="label">{{ $t('mine.银行名称') }}</view>
          <input v-model="bankName" class="input" type="text" maxlength="30" :placeholder="$t('mine.请输入银行名称')" />
        </view>
        <!-- <view class="form-item">
          <view class="label">{{ $t('mine.开户行') }}</view>
          <input v-model="bankNameSub" class="input" type="text" maxlength="30" />
        </view> -->
        <view class="form-item">
          <view class="label">{{ $t('mine.收款账号') }}</view>
          <input v-model="bankCode" class="input" type="text" maxlength="30" :placeholder="$t('mine.请输入收款账号')" />
        </view>
      </template>
      <view class="form-item" v-if="bankType == '2'">
        <view class="label"> {{ $t('mine.USDT地址') }}</view>
        <textarea auto-height v-model="bankCode" class="input" type="text" maxlength="65" :placeholder="$t('mine.请输入USDT地址')"></textarea>
      </view>
      <view class="btn" @click="submit">{{ $t('common.确认') }}</view>
    </view>
    <!-- 交易密码 -->
    <CodePop v-if="showPay" @cancleCode="payCancle" @comfireCode="payComfire"></CodePop>
  </view>
</template>
<script>
  import { submitBank } from '@/api/wallet.js'
  import CodePop from '@/components/CodePop/CodePop.vue'

  export default {
    components: {
      CodePop
    },
    data() {
      return {
        user: this.$store.state.user,
        name: '',
        bankName: '',
        bankType: '1',
        bankNameSub: '',
        bankCode: '',
        showPay: false
      }
    },
    methods: {
      // 支付取消
      payCancle() {
        this.showPay = false
      },
      // 支付完成
      payComfire(pwd) {
        this.showPay = false
        this.$modal.loading('loading', 'loading')
        submitBank({
          name: this.name,
          bank_name: this.bankName,
          bank_type: this.bankType,
          bank_name_sub: this.bankNameSub,
          bank_code: this.bankCode,
          cash_password: pwd
        })
          .then((res) => {
            this.$modal.closeLoading()
            uni.showToast({
              title: this.$t('common.提交成功'),
              icon: 'none'
            })
            setTimeout(() => {
              // uni.navigateBack()
              this.$tab.navigateTo('/pages/mine/wallet/index')
            }, 500)
          })
          .catch((err) => {
            this.$modal.closeLoading()
          })
      },
      //返回
      handleBack() {
        // uni.navigateBack()
        this.$tab.navigateTo('/pages/mine/wallet/bank')
      },
      // 类型切换
      handleChangebankType(val) {
        this.bankType = val
      },
      //提交
      submit() {
        if (!this.user.password) {
          this.$modal.msgError(this.$t('mine.请先设置交易密码'))
          setTimeout(() => {
            this.$tab.navigateTo('/pages/mine/cashPwd/index')
          }, 1000)
          return
        }
        this.showPay = true
      }
    }
  }
</script>
<style lang="scss" scoped>
  .page-bank-edit {
    position: relative;
    background-color: #f7f7f7;
    min-height: 100vh;
    .header {
      background-color: #31b2b5;
      text-align: center;
      height: 44px;
      line-height: 44px;
      position: fixed;
      top: 0;
      width: 100vw;
      color: #fff;

      font-size: 26rpx;
      z-index: 9;
      .back-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: normal;
      }
    }
    .content {
      margin: 100px 20px 10px;
      .tabs {
        display: flex;
        height: 40px;
        border-radius: 3px;
        padding: 5px;
        background-color: #eeeeef;
        margin-bottom: 10px;
        .tab-item {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 26rpx;
          &.is-active {
            background-color: #fff;
            border-radius: 3px;
            color: #31b2b5;
          }
        }
      }
      .form-item {
        display: flex;
        border: 1px solid #f3f3f3;
        padding: 16px;
        margin-bottom: 20px;
        background: #fff;
        border-radius: 4px;
        .label {
          color: #000;
          width: 140px;
          font-size: 28rpx;
        }
        .input {
          flex: 1;
          margin-left: 10px;
          overflow: hidden;
          ::v-deep.uni-input-placeholder {
            text-align: right;
            color: #ccc;
            font-size: 26rpx;
          }
          ::v-deep.uni-textarea-placeholder {
            text-align: right;
            color: #ccc;
            font-size: 26rpx;
          }
          ::v-deep.uni-input-input {
            text-align: right;
            color: #000;
            font-size: 26rpx;
          }
          ::v-deep.uni-textarea-textarea {
            text-align: right;
            color: #000;
            font-size: 26rpx;
          }
        }
      }
      .btn {
        background: linear-gradient(90deg, #31d6ef, #5599e0);
        width: 100%;
        height: 50px;
        border-radius: 4px;
        font-size: 16px;
        color: #fff;
        line-height: 50px;
        text-align: center;
        margin: 100rpx auto 0;
      }
    }
  }
</style>
